/*Footer*/


    /* Color de fondo del footer */
    .bg-custom {
      background: linear-gradient(to right, rgb(4, 85, 191), rgb(4, 66, 191)); /* Cambia este color según tu preferencia */
  }

  /* Estilo para la lista del footer */
  .footer-list {
      list-style: none; /* Elimina los puntos de la lista */
      padding: 0; /* Elimina el padding de la lista */
      margin: 0; /* Elimina el margin de la lista */
  }

  .footer-list li {
      display: inline; /* Muestra los elementos de la lista en línea */
  }

  .footer-list a {
      color: #ffffff; /* Asegura que el enlace sea blanco para contrastar con el fondo */
      text-decoration: none; /* Elimina el subrayado del enlace */
  }

  .footer-list a:hover {
      text-decoration: underline; /* Opcional: Subraya el enlace al pasar el ratón */
  }



  /*Contacto*/

  .card-img-top {
    width: 30%; /* Ajusta el ancho según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Mantiene la proporción y recorta si es necesario */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Asegura que el margin auto funcione correctamente */
    border: none;
}

.card{
  border: none;
  text-align: center;
}



/*Boton Whatsapp*/


.btn-wsp {
  position: fixed; /* Fija el botón en la pantalla */
  bottom: 20px; /* Espacio desde el borde inferior */
  right: 20px; /* Espacio desde el borde derecho */
  border-radius: 50%; /* Hace el botón redondo */
  background-color: #25D366; /* Color verde de WhatsApp */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para el botón */
  padding: 10px; /* Espacio interno del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Asegura que el botón esté por encima de otros elementos */
}

.btn-wsp img {
  width: 50px; /* Ancho del icono */
  height: 50px; /* Altura del icono */
  display: block; /* Asegura que la imagen se muestre como un bloque */
}

/* Cambio de color al pasar el ratón (opcional) */
.btn-wsp:hover {
  background-color: #128C7E; /* Color verde más oscuro */
}

/*Navbar*/

.navbar-nav {
  margin-left: auto; /* Usa auto para mover la lista hacia la derecha en un contenedor flex o similar */
  margin-right: 0; /* Asegura que no haya margen derecho adicional */
}

/* Values */
/* Contenedor de las tarjetas */
.values {
  display: flex;
  flex-wrap: wrap; /* Permite que las tarjetas se envuelvan automáticamente */
  justify-content: center; /* Centra las tarjetas horizontalmente */
  gap: 30px; /* Espacio entre las tarjetas */
  padding: 20px; /* Espacio interno del contenedor */
  max-width: 1000px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 20px;
}

/* Estilo de las tarjetas individuales */
.values > div {
  max-width: 300px; /* Ancho máximo de la tarjeta */
  width: 100%; /* Para asegurar que ocupe todo el ancho disponible */
  text-align: center; /* Centrar el contenido */
  padding: 20px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo del texto dentro de las tarjetas */
.values p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0;
}

/* Estilo de las imágenes dentro de las tarjetas */
.values img {
  width: 100px; /* Ajusta el tamaño de la imagen según tus necesidades */
  height: auto;
  margin-bottom: 10px;
}


/* Carrousel */

.plus-btn {
  background-color: #007bff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  color: white;
}

.overlay::before {
  content: '';
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}

.agenda-button {
  background-color: #0442BF; 
  border-color: #0442BF;
  color:white
}

.agenda-button:hover {
  background-color: #2057c4;
}

.barra-link {
  color: #0455BF;
  font-weight: bold; 
  font-size: 25px;
}

.barra-link:hover {
  color: #2468c0;
}

.hero-section {
  background-color: #f2f2f2;
  padding-top: 0px;
  text-align: center;
}
.services-section {
  padding: 50px 0;
}
.service-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s;
  width: 100%;
  max-width: 350px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
}
.service-card:hover {
  transform: translateY(-10px);
}
.cta-section {
  background-color: #495057;
  color: white;
  padding: 40px 0;
  text-align: center;
}

.card-img-overlay h1.card-text,
.card-img-overlay h4.card-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajusta los valores según lo necesites */
}

@media (max-width: 550px) {
  .card-img-overlay h1.card-text {
    font-size: 1.2rem; /* Ajusta el tamaño según lo necesites */
  }

  .card-img-overlay h4.card-text {
    font-size: 0.9rem; /* Ajusta el tamaño según lo necesites */
  }

  .card-img-overlay .agenda-button {
    font-size: 0.7rem; /* Ajusta el tamaño según lo necesites */
  }
}

@media (max-width: 600px) {
  .footer-list {
    flex-direction: column;
    align-items: center;
  }

  .footer-list div {
    margin-bottom: 10px; /* Añade espacio entre los elementos */
  }
}